<template>
  <section class="section" ref="section">
    <div class="left model" id="leftModel">
      <TemplateTitle title="合同内容" />
      <div class="content drag-container" id="templateContent">
        <div class="edit-content" v-html="editContent"></div>
        <!-- (item.posPage - 1) * 841 + 841 - 80 - item.posY  => item.posPage * 841 - 80 - item.posY    无分页841 - 80 - item.posY -->
        <div class="drag-dom" :class="`drag-dom${index}`" :style="{ opacity: item.opacity, top: item.posY + 'px', left: item.posX + 'px' }" v-for="(item, index) in drags" :key="index">
          <div class="oper">
            <!-- <div class="static">1</div> -->
            <div class="close" @click="remove(index)">
              <i class="iconfont icon-shanchu1"></i>
            </div>
          </div>
          <div class="drag-header" :class="`drag-header${index}`">
            <div class="box" v-drag="[`.drag-container .drag-dom${index}`, `.drag-container .drag-header${index}`]">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="right model">
      <TemplateTitle title="签署区" />
      <div class="info">
        <div class="btn" @click="dragsPush({ name: '员工签署区', opacity: 1 })">员工签署区</div>
        <div class="btn" @click="dragsPush({ name: '公司签署区', opacity: 2 })">公司签署区</div>
      </div>
    </div>
  </section>
</template>

<script>
import TemplateTitle from "./TemplateTitle.vue";
export default {
  components: { TemplateTitle },
  props: {
    stampAreas: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    stampAreas: {
      deep: true,
      immediate: true,
      handler(newVal) {
        let arr = [];
        newVal.map((i) => {
          arr.push({
            name: i.isPersonal ? "员工签署区" : "公司签署区",
            opacity: i.isPersonal ? 1 : 2,
            posX: i.posX - 80,
            posY: i.posPage * 841 - 80 - i.posY,
            posPage: i.posPage,
          });
        });
        this.drags = arr;
      },
    },
  },
  data() {
    return {
      drags: [],
      editContent: "",
    };
  },
  methods: {
    dragsPush(data) {
      let posY = document.getElementById("templateContent").scrollTop;
      data.posY = document.getElementById("leftModel").clientHeight / 2 + posY + -80;
      this.drags.push(data);
    },
    remove(idx) {
      const dragDom = document.querySelectorAll(".drag-dom");
      dragDom[idx].style.display = "none";
    },
  },
  mounted() {
    this.$bus.$on("GetEditContent", (e) => {
      this.editContent = e;
    });
  },
};
</script>

<style scoped lang="less">
/* table 样式 */
:deep(table) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  line-height: 1.5;
}
:deep(table td,
table th) {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc !important;
  padding: 3px 5px;
}
:deep(table th) {
  border-bottom: 2px solid #ccc;
  border-right: 1px solid #ccc !important;
  text-align: center;
}

/* blockquote 样式 */
:deep(blockquote) {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1 !important;
}

/* code 样式 */
:deep(code ){
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
:deep(pre code ){
  display: block;
}

/* ul ol 样式 */
:deep(ul,
ol ){
  margin: 10px 0 10px 20px;
}
.edit-content {
  font-size: 16px;
  line-height: 30px;
}
.drag-container {
  overflow: hidden;
  position: relative;
  .drag-dom {
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    display: inline-block;
    &:hover {
      z-index: 999;
    }
    &:hover .oper {
      display: flex;
    }
    &:hover .box {
      border: 1px dashed #5492f6 !important;
      color: #5492f6;
    }
    .oper {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      display: none;
      .static {
        background: #5492f6;
        padding: 5px;
      }
      .close {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background: #f56561;
        // padding: 5px;
      }
    }
    .drag-header {
      display: inline-block;
      .box {
        padding: 25px;
        // line-height: 160px;
        text-align: center;
        // width: 160px;
        // height: 210px;
        border: 1px dashed #000;
        white-space: nowrap;
      }
    }
  }
}
.section {
  flex: 1;
  display: flex;
  overflow: hidden;
  .model {
    padding: 10px 20px;
  }
  .left {
    flex: 5;
    // width: 635px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .content {
      border: 1px solid #ccc;
      flex: 1;
      overflow: auto;
      padding: 6px 20px 200px 20px;
    }
  }
  .right {
    flex: 2;
    display: flex;
    flex-direction: column;
    .info {
      border: 1px solid #ccc;
      flex: 1;
      padding: 6px 20px;
      .btn {
        cursor: pointer;
        padding: 6px 10px;
        border: 1px solid #5c91fb;
        border-radius: 3px;
        color: #5c91fb;
        font-size: 16px;
        text-align: center;
        margin-right: 15px;
        display: inline-block;
        margin-top: 15px;
        &:hover {
          transition: 0.3s all;
          background: #5c91fb;
          color: #fff;
        }
      }
    }
  }
}
</style>
